<template>
  <div class="note-content-wrapper" :style="noteContentWrapperStyle">
    <header :style="headerStyle">
      <div :style="topBarStyle">
        <div :style="topBarContentStyle">
          <!-- 打开左侧菜单的按钮 -->
          <div
            v-show="!pageLeftStore.isSidebarOpen"
            :style="leftButtonWrapperStyle"
            @mouseenter="onIconMouseenter"
            @mouseleave="onIconMouseleave"
          >
            <div :style="{ position: 'relative' }">
              <div :style="popupIconWrapperStyle"><popup-icon /></div>
              <div :style="openIconWrapperStyle"><open-icon /></div>
            </div>
          </div>
          <!-- 面包屑 -->
          <div v-if="breadCrumbs.length > 0" :style="breadCrumbWrapperStyle">
            <template v-for="(breadCrumb, index) in breadCrumbs" :key="`template-${index}`">
              <div :style="{ display: 'flex', alignItems: 'center' }">
                <a :style="breadCrumbButtonStyle">
                  <div :style="{ display: 'flex', alignItems: 'center' }">
                    <div :style="breadCrumbButtonTextStyle">{{ breadCrumb.title }}</div>
                  </div>
                </a>
              </div>
              <span v-if="index < lastBreadCrumbIndex" :key="`span-${index}`" :style="breadCrumbSlashStyle">/</span>
            </template>
          </div>
          <div :style="{ flexGrow: 1, flexShrink: 1 }"></div>
          <div>abc</div>
        </div>
      </div>
    </header>
    <main>
      <div :style="noteContentContainerStyle">
        <cn-editor v-model:blocks="nodeTreeCacheStore.blocksOfSelectedNote" />
      </div>
    </main>
  </div>
</template>

<script setup lang="ts">
import { CSSProperties } from 'vue';
import PopupIcon from './popup-icon.vue';
import OpenIcon from './open-icon.vue';
import { usePageLeftStore } from '@/plugins/pinia/store/page-left';
import { useNodeTreeCacheStore } from '@/plugins/pinia/store/node-tree-cache';
import CnEditor from '@/components/cn-editor/cn-editor.vue';

const nodeTreeCacheStore = useNodeTreeCacheStore();
const pageLeftStore = usePageLeftStore();
const iconHover = ref(false);
const onIconMouseenter = () => {
  iconHover.value = true;
};
const onIconMouseleave = () => {
  iconHover.value = false;
};

const breadCrumbs = computed(() => {
  return nodeTreeCacheStore.breadCrumbs;
});
const lastBreadCrumbIndex = computed(() => {
  return breadCrumbs.value.length - 1;
});

const noteContentWrapperStyle: CSSProperties = {
  display: 'flex',
  flexDirection: 'column',
  width: '100%',
  overflow: 'hidden',
};
const headerStyle: CSSProperties = {
  maxWidth: '100vw',
  zIndex: 100,
  background: 'white',
  userSelect: 'none',
};
const topBarStyle: CSSProperties = {
  width: '100%',
  maxWidth: '100vw',
  height: '45px',
  opacity: 1,
  transition: 'opacity 700ms ease 0s, color 700ms ease 0s',
  position: 'relative',
};
const topBarContentStyle: CSSProperties = {
  display: 'flex',
  justifyContent: 'space-between',
  alignItems: 'center',
  overflow: 'hidden',
  height: '100%',
  paddingLeft: '12px',
  paddingRight: '10px',
};
const leftButtonWrapperStyle: CSSProperties = {
  flexShrink: 0,
  width: '48px',
  height: '48px',
  margin: '-12px -6px -12px -12px',
  padding: '12px',
  boxSizing: 'border-box',
};
const getIconStyle = (): CSSProperties => {
  return { position: 'absolute', top: 0, left: 0, willChange: 'opacity' };
};
const popupIconWrapperStyle = computed<CSSProperties>(() => {
  return Object.assign(getIconStyle(), { opacity: iconHover.value ? 0 : 1 });
});
const openIconWrapperStyle = computed<CSSProperties>(() => {
  return Object.assign(getIconStyle(), { opacity: iconHover.value ? 1 : 0 });
});

const noteContentContainerStyle: CSSProperties = { height: 'calc(100vh - 45px)', overflowY: 'auto' };

const breadCrumbSlashStyle: CSSProperties = {
  margin: '0 2px',
  color: 'rgba(55, 53, 47, 0.5)',
};
const breadCrumbWrapperStyle: CSSProperties = {
  display: 'flex',
  alignItems: 'center',
  lineHeight: 1.2,
  fontSize: '14px',
};
const breadCrumbButtonStyle: CSSProperties = {
  flexShrink: 1,
  display: 'flex',
  alignItems: 'center',
  height: '24px',
  color: 'rgb(55, 53, 47)',
  textDecoration: 'none',
  userSelect: 'none',
  transition: 'background 20ms ease-in 0s',
  cursor: 'pointer',
  whiteSpace: 'nowrap',
  borderRadius: '4px',
  padding: '2px 6px',
};
const breadCrumbButtonTextStyle: CSSProperties = {
  whiteSpace: 'nowrap',
  overflow: 'hidden',
  textOverflow: 'ellipsis',
  maxWidth: '160px',
};
</script>
